<template>
  <div class="home-container" v-loading="loading">
    <PhotoSelect v-if="!logoDrawerShow && !file" @success="fileSelectSuccess" />
    <PhotoView v-if="photoViewShow" :file="file" @menu-click="photoViewMenuClick" />
    <DrawView v-if="drawData" ref="drawViewRef" :drawData="drawData" @success="photoDrawSuccess" @menu-click="drawViewMenuClick" />
    <el-drawer
      class="drawer"
      :size="380"
      v-model="logoDrawerShow"
      title="选择LOGO"
      direction="ltr"
      :close-on-click-modal="false"
      @opened="logoDrawerShowed = true"
      @closed="logoDrawerShowed = false"
    >
      <!-- drawer opened再渲染，避免logo图片无缓存时动画掉帧 -->
      <LogoSelect v-if="logoDrawerShowed" @success="logoSelectSuccess"/>
    </el-drawer>
    <el-drawer
      class="frameDrawer"
      v-model="frameDrawerShow"
      title="选择风格"
      direction="ltr"
      :size="820"
      :close-on-click-modal="false"
    >
      <FrameSelect v-if="frameDrawerShow" :logo="logo" :exifData="exifData" @success="frameSelectSuccess" />
    </el-drawer>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import PhotoSelect from '../components/PhotoSelect.vue'
  import PhotoView from '../components/PhotoView.vue'
  import LogoSelect from '../components/LogoSelect.vue'
  import FrameSelect from '../components/FrameSelect.vue'
  import DrawView from '../components/DrawView.vue'

  const drawData = ref(null)
  const exifData = ref(null)
  const loading = ref(false)
  const photoViewShow = ref(false)
  const logoDrawerShow = ref(false)
  const logoDrawerShowed = ref(false)
  const frameDrawerShow = ref(false)
  const logo = ref('')
  const drawViewRef = ref(null)
  let file = ref(null)


  const fileSelectSuccess = e => {
    file.value = e.file
    photoViewShow.value = true
  }

  const logoSelectSuccess = (e) => {
    frameDrawerShow.value = true
    logo.value = e.url
  }

  const frameSelectSuccess = (e) => {
    photoViewShow.value = false
    logoDrawerShow.value = false
    frameDrawerShow.value = false
    loading.value = true
    drawData.value = {
      file: file.value, // 照片文件
      ...e,
    }
    
    window.localStorage.setItem('frameConfigs', JSON.stringify(e.frameConfigs)) // 重置相框内容的配置缓存
  }

  const photoDrawSuccess = () => {
    loading.value = false
    photoViewShow.value = false
  }

  
  const drawViewMenuClick = (e) => {
    const {name} = e
    if (name === 'throw-away') {
      logoDrawerShow.value = false
      frameDrawerShow.value = false
      photoViewShow.value = false
      file.value = null
      exifData.value = null
      logo.value = null
      drawData.value = null
    }
  }


  const photoViewMenuClick = e => {
    if (e.name === 'cancel') {
      drawViewMenuClick({name: 'throw-away'})
    }
    if (e.name === 'next') {
      logoDrawerShow.value = true
      exifData.value = e.exifData
    }
  }






</script>

<style lang="less" scoped>
  :deep(.el-loading-mask) {
    position: fixed;
    background-color: rgba(0,0,0,0.7);
  }
  .home-container {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    :deep(.el-drawer) {
      background-color: #222222;
      &.drawer{
        .el-drawer__body {
          overflow: hidden;
        }
      }
      .el-drawer__title {
        color: #fff;
      }
      .el-drawer__body {
        padding: 0;
      }
    }
  }
  
  
</style>
